<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="common/head :: htmlhead">

<body>
<link rel="stylesheet" th:href="@{/static/layui/css/login.css}" media="all">

<style>
    .layui-form-label{
        width: 80px;
    }
    .layui-input-block {
        margin-left: 110px;
        min-height: 36px
    }
</style>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header" style="font-size:large">个人会员注册</div>
        <div class="layui-card-body">
            <form class="layui-form" action="" lay-filter="component-form-group">
                <div class="layadmin-user-login-box layadmin-user-login-body layui-form layui-col-md3">
                    <div class="layui-form-item">
                        <label class="layadmin-user-login-icon layui-icon layui-icon-username"></label>
                        <input type="text" name="username" lay-verify="checkusername" placeholder="请输入用户名"
                               class="layui-input">
                    </div>
                    <div class="layui-form-item">
                        <label class="layadmin-user-login-icon layui-icon layui-icon-password"></label>
                        <input type="password" name="password" id="password" lay-verify="required"
                               placeholder="请输入密码" class="layui-input">
                    </div>
                    <div class="layui-form-item">
                        <label class="layadmin-user-login-icon layui-icon layui-icon-password"></label>
                        <input type="password" id="repwd" lay-verify="repass"
                               placeholder="请确认密码" class="layui-input">
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-row">
                            <div class="layui-col-xs7">
                                <label class="layadmin-user-login-icon layui-icon layui-icon-vercode"></label>
                                <input type="text" name="code" lay-verify="required"
                                       placeholder="图形验证码" class="layui-input">
                            </div>
                            <div class="layui-col-xs5">
                                <div style="margin-left: 10px;">
                                    <img id="codeimg" class="layadmin-user-login-codeimg" title="点击换一个" th:src="@{/createCode}" onclick="changeImg()">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <input type="checkbox" id="agreement" lay-verify="agreement" lay-skin="primary" title="同意联盟章程">
                        <a class="layadmin-user-jump-change layadmin-link" style="margin-top: 7px;" >《工业博物馆联盟章程》</a>

                    </div>
                </div>
                <hr/>


                <!--第一行：姓名性别生日-->
                <div class="layui-row layui-col-lg12 layui-form-item">
                    <div class="layui-col-lg4">
                        <label class="layui-form-label">姓名</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" lay-verify="required" placeholder="输入姓名"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-col-lg2">
                        <label class="layui-form-label">性别</label>
                        <div class="layui-input-block">
                            <select name="gender" lay-verify="required">
                                <option value=""></option>
                                <option value="0">男</option>
                                <option value="1">女</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-col-lg6">
                        <label class="layui-form-label">出生日期</label>
                        <div class="layui-input-block">
                            <input type="text" name="borndate" lay-verify="required" placeholder=""
                                   autocomplete="off" class="layui-input" id="date1">
                        </div>
                    </div>
                </div>

                <!--第二行：单位、现任职务-->
                <div class="layui-row layui-col-lg12 layui-form-item">
                    <div class="layui-col-lg6">
                        <label class="layui-form-label">工作单位</label>
                        <div class="layui-input-block">
                            <input type="text" name="unit" lay-verify="required" placeholder=""
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-col-lg6">
                        <label class="layui-form-label">现任职务</label>
                        <div class="layui-input-block">
                            <input type="text" name="position" lay-verify="required" placeholder=""
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <!--第三行：职称、政治面貌-->
                <div class="layui-row layui-col-lg12 layui-form-item">
                    <div class="layui-col-lg6">
                        <label class="layui-form-label">技术职称</label>
                        <div class="layui-input-block">
                            <input type="text" name="jobtitle" lay-verify="required" placeholder=""
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-col-lg6">
                        <label class="layui-form-label">政治面貌</label>
                        <div class="layui-input-block">
                            <select name="politicalstatus" lay-verify="required">
                                <option value="中共党员">中共党员</option>
                                <option value="中共预备党员">中共预备党员</option>
                                <option value="共青团员">共青团员</option>
                                <option value="无党派或民主党派">无党派或民主党派</option>
                                <option value="群众">群众</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!--第四行：所在行业-->
                <div class="layui-row layui-col-lg12 layui-form-item">
                    <div class="layui-col-lg12">
                        <label class="layui-form-label">所在行业</label>
                        <div class="layui-input-block">
                            <input class="layui-input" readonly="readonly"type="text" name="industrytype" id="hangye"
                                   onkeyup="IndustrialClassification()" onclick="IndustrialClassification()" lay-verify="required">
                            <input type="hidden" id="hangyetag" value="0">
                        </div>
                    </div>
                </div>

                <!--第五行：学历、母校、专业-->
                <div class="layui-row layui-col-lg12 layui-form-item">
                    <div class="layui-col-lg2">
                        <label class="layui-form-label">学历</label>
                        <div class="layui-input-block">
                            <select name="xueli" lay-verify="required">
                                <option value="小学">小学</option>
                                <option value="初中">初中</option>
                                <option value="中专/高中">中专/高中</option>
                                <option value="专科">专科</option>
                                <option value="本科">本科</option>
                                <option value="硕士研究生">硕士研究生</option>
                                <option value="博士研究生">博士研究生</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-col-lg4">
                        <label class="layui-form-label">毕业院校</label>
                        <div class="layui-input-block">
                            <input type="text" name="educateschool" lay-verify="required" placeholder=""
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-col-lg6">
                        <label class="layui-form-label">所学专业</label>
                        <div class="layui-input-block">
                            <input type="text" name="specialty" lay-verify="required" placeholder=""
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <!--第六行：地址-->
                <div class="layui-row layui-col-lg12 layui-form-item">

                    <div class="layui-col-lg6" id="area-picker">
                        <label class="layui-form-label">省市</label>
                        <div class="layui-input-inline layui-col-lg3">
                            <select name="province" class="province-selector" lay-filter="province-1">
                                <option value="">请选择省</option>
                            </select>
                        </div>
                        <div class="layui-input-inline layui-col-lg3" >
                            <select name="city" class="city-selector" lay-filter="city-1">
                                <option value="">请选择市</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-col-lg6">
                        <label class="layui-form-label">详细地址</label>
                        <div class="layui-input-block">
                            <input type="text" name="address" lay-verify="required" placeholder="填写市以后的地址"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>

                <!--第七行：联系电话、邮箱-->
                <div class="layui-row layui-col-lg12 layui-form-item">
                    <div class="layui-col-lg6">
                        <label class="layui-form-label">联系电话</label>
                        <div class="layui-input-block">
                            <input type="text" name="phone" lay-verify="required" placeholder=""
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-col-lg6">
                        <label class="layui-form-label">电子邮箱</label>
                        <div class="layui-input-block">
                            <input type="text" name="email" lay-verify="email" placeholder=""
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>


                <!--第九行：身份证号-->
                <div class="layui-row layui-col-lg12 layui-form-item">
                    <div class="layui-col-lg6">
                        <label class="layui-form-label">身份证号</label>
                        <div class="layui-input-block">
                            <input type="text" name="idcard" lay-verify="required" placeholder=""
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>

                <!--工作经历-->
                <div class="layui-row layui-col-lg12 layui-form-item">
                    <label class="layui-form-label">工作经历</label>
                    <div class="layui-input-block">
                        <textarea name="workexperience" placeholder="起止时间、工作单位、职务职称、主要工作内容、重点介绍与博物馆工作有关情况" class="layui-textarea"></textarea>
                    </div>
                </div>

                <!--工作成果-->
                <div class="layui-row layui-col-lg12 layui-form-item">
                    <label class="layui-form-label">工作成果</label>
                    <div class="layui-input-block">
                        <textarea name="workresult" placeholder="重点介绍与博物馆工作有关情况" class="layui-textarea"></textarea>
                    </div>
                </div>

                <!--所获奖励-->
                <div class="layui-row layui-col-lg12 layui-form-item">
                    <label class="layui-form-label">所获奖励</label>
                    <div class="layui-input-block">
                        <textarea name="honor" placeholder="重点介绍与博物馆工作有关情况" class="layui-textarea"></textarea>
                    </div>
                </div>

                <!--提交&重置-->
                <div class="layui-form-item layui-layout-admin">
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn" onclick="location.href='/login'">返回登录</button>
                        <button class="layui-btn" lay-submit="" lay-filter="component-form-per">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript" th:src="@{/static/js/hangye.js}"></script>

<script type="text/javascript">
    function changeImg(){
        var img = document.getElementById('codeimg');
        img.src = "/createCode?d=" + Math.floor(Math.random()*100)
    }

    layui.config({
        base: '/static/lib/' //静态资源所在路径
    }).use(['index', 'form','layarea'], function(){
        var $ = layui.$
            ,admin = layui.admin
            ,element = layui.element
            ,layer = layui.layer
            ,laydate = layui.laydate
            ,layarea = layui.layarea
            ,form = layui.form;

        layarea.render({
            elem: '#area-picker',
            change: function (res) {
                //选择结果
                console.log(res);
            }
        });

        form.render(null, 'component-form-group');

        /* 自定义验证规则 */
        form.verify({
            checkusername:function(value){
                var datas={"username": value};
                var message = '';
                $.ajax({
                    type: "POST",
                    url: "/checkUsername", //(对应后台的方法)
                    async: false, //改为同步请求
                    dataType: "text",
                    data: datas,
                    success: function (data) {
                        message = data;
                    }
                });
                if (message === "duplicate") {
                    return "用户名重复！";
                }
                //需要注意 需要将返回信息写在ajax方法外

            },repass: function(value) {
                var password = $("#password").val();
                if(value !== password){
                    return '两次密码不一致';
                }
            },city:function(value){
                if(value === "-1"){
                    return "请选择省市";
                }
            }, agreement:function () {
                if(!$('#agreement').is(':checked')) {
                    $('#agreement').focus();
                    return "请阅读博物馆章程并勾选同意按钮!";
                }
            }
        });

        layui.use('laydate', function(){
            var laydate = layui.laydate;
            //执行一个laydate实例
            laydate.render({
                elem: '#date1' //指定元素
                ,format: 'yyyy/MM/dd'
            });
        });

        form.on("submit(component-form-per)",function (data) {
            console.log(data.field)
            $.ajax({
                url:"/registerper",
                async: false,
                type:"POST",
                dataType: "text",
                data:data.field,
                success: function(data){
                    if(data==="codeError"){
                        layer.msg('验证码输入错误！', {icon: 2});
                    }else if(data==="success"){
                        layer.open({
                            title: '提交成功'
                            ,content: '提交成功，请登录后下载审核文件，盖章上传！'
                            ,yes: function(index, layero){
                                location.href="/login";
                            }
                        });


                    }
                }
            });
            return false;
        });

    });
</script>


</body>
</html>


